<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8" />
	<title>View Products</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
	<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	<script>
		$(document).ready(function(){
			$.getJSON("http://localhost:8071/products", function(result){
				$.each(result, function(key,value) {
					$("#productsJson").append(value.id+" "+value.name+" ");
				});
			});
		});
	</script>
</head>
<body>
<div class="container">
	<h4>View Products</h4>
	<div><p id = "productsJson" class="bg-info" style="padding: 15px;"></p></div>
	<a class="btn btn-default" th:href="@{/}" role="button">Index</a>
	<a class="btn btn-default" th:href="@{/add-products}" role="button">Add Products</a>
</div>
</body>
</html>